<template>
	<view class="commission-page">
		<scroll-view scroll-y="true">
			<div class="nav">
				<statusBarHeight></statusBarHeight>
				<div class="title">
					<div class="icon-back" @click='goWindow'>
						<uni-icons type="back" size="24" color="#fff"></uni-icons>
					</div>
					<div class="right">常见问题</div>
					<div class="center">
						佣金统计
					</div>
				</div>
				<div class="info">
					<div class="box">
						<div class="head">
							<div class="left">当前账户</div>
							<div class="name">{{renderData.name}}</div>
						</div>
						<div class="tip">
							<div class="text">可体现金额（元）</div>
							<div class="icon" @click="isShowMoney=!isShowMoney">
								<image src="/static/commission/eye.png" mode="widthFix" class="img"></image>
							</div>
						</div>
						<div class="body">
							<div class="num" v-show="isShowMoney">{{renderData.money|moneyTransformString}}</div>
							<div class="num" v-show="!isShowMoney">****</div>
							<div class="btn" @click='goWithdrawal'>提现</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main">
				<div class="details">
					<div class="title">推广明细</div>
					<div class="icon">
						<uni-icons type="forward" size="18" color="#7b7b7b"></uni-icons>
					</div>
				</div>
				<div class="data">
					<div class="title">
						<div class="title">推广明细</div>
						<div class="right">
							<div class="text">查看更多</div>
							<uni-icons type="forward" size="18" color="#7b7b7b"></uni-icons>
						</div>
					</div>
					<div class="tip">
						<div class="text">
							仅包含精选联盟数据
						</div>
						<div class="icon">
							<u-icon name="question" color="#fff" size="8"></u-icon>
						</div>
					</div>
					<div class="tab-title">
						<div @click='tabItem_handleClick(0)' :class="['item', {actived:tabIndex==0}]">昨日</div>
						<div @click='tabItem_handleClick(1)' :class="['item', {actived:tabIndex==1}]">今日</div>
						<div @click='tabItem_handleClick(2)' :class="['item', {actived:tabIndex==2}]">近7日</div>
						<div @click='tabItem_handleClick(3)' :class="['item', {actived:tabIndex==3}]">近30日</div>
					</div>
					<div class="tab-content">
						<div class="item">
							<div class="money">
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday0}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today0}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek0}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth0}}</div>
							</div>
							<div class="label">
								结算接单数
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday1}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today1}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek1}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth1}}</div>
							</div>
							<div class="label">
								结算接单数
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday2}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today2}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek2}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth2}}</div>
							</div>
							<div class="label">
								结算佣金收入
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday3}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today3}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek3}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth3}}</div>
							</div>
							<div class="label">
								付款订单数
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday4}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today4}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek4}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth4}}</div>
							</div>
							<div class="label">
								佣金金额
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday5}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today5}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek5}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth5}}</div>
							</div>
							<div class="label">
								预估佣金收入
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="tab-content grey">
						<div class="item">
							<div class="money">
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday6}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today6}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek6}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth6}}</div>
							</div>
							<div class="label">
								未退款订单数
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday7}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today7}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek7}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth7}}</div>
							</div>
							<div class="label">
								未退款金额
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday8}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today8}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek8}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth8}}</div>
							</div>
							<div class="label">
								未退款预估佣金
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday9}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today9}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek9}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth9}}</div>
							</div>
							<div class="label">
								退款付款订单数
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday10}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today10}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek10}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth10}}</div>
							</div>
							<div class="label">
								退款金额
							</div>
						</div>
						<div class="item">
							<div class="money">
								<div class="text">￥</div>
								<div class="num" v-show="tabIndex==0">{{renderData.yesterday11}}</div>
								<div class="num" v-show="tabIndex==1">{{renderData.today11}}</div>
								<div class="num" v-show="tabIndex==2">{{renderData.almostAWeek11}}</div>
								<div class="num" v-show="tabIndex==3">{{renderData.nearlyAMonth11}}</div>
							</div>
							<div class="label">
								退款预估佣金
							</div>
						</div>
					</div>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	import statusBarHeight from "@/components/statusBarHeight.vue"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		props: {
			isDisplay: {
				type: Boolean,
				default: false,
			},
			configureData: {
				type: Object,
			},
		},
		components: {
			statusBarHeight,
		},
		data() {
			return {
				tabIndex: 0,
				isShowMoney: false,
				data: {},
			}
		},
		computed: {
			renderData() {
				if (this.isDisplay) {
					// console.log(this.configureData);
					return this.configureData
				}
				// console.log(this.data);
				return this.data
			},
		},
		onLoad() {
			this.getData('commissionData')
		},
		methods: {
			tabItem_handleClick(index) {
				this.tabIndex = index
			},
			goWithdrawal() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/withdrawal/withdrawal'
				})
			},
			goWindow() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/window/window'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.commission-page {

		.nav {
			background-color: #3d3e53;

			.title {
				height: 36px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
				font-size: 16px;
				position: relative;
				padding: 0 15px;

				.center {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					width: max-content;
					height: max-content;
				}
			}

			.info {
				margin-top: 20px;
				padding: 0 15px;

				.box {
					border-radius: 8px 8px 0 0;
					background-color: #fff;
					padding: 0 15px 20px;

					.head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 44px;
						font-size: 14px;

						.left {
							color: #000;
							font-weight: bold;
						}

						.name {
							color: #777;
							font-size: 14px;
							position: relative;
							right: 15px;

							&::after {
								content: "";
								display: block;
								position: absolute;
								top: 0;
								bottom: 0;
								right: -14px;
								width: 0;
								margin: auto;
								height: 0;
								border: 5px solid #444;
								border-bottom-width: 0;
								border-left-color: transparent;
								border-right-color: transparent;
							}
						}
					}

					.tip {
						height: 32px;
						display: flex;
						align-items: center;
						font-size: 12px;
						color: #777;

						.icon {
							margin-left: 10px;
							width: 16px;
						}
					}

					.body {
						height: 46px;
						display: flex;
						justify-content: space-between;
						padding: 8px 0;
						box-sizing: border-box;

						.num {
							color: #000;
							font-size: 18px;
							font-weight: bold;
						}

						.btn {
							height: 30px;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 6px;
							overflow: hidden;
							font-size: 12px;
							color: #f2f2f2;
							width: 75px;
							background-color: #f2566b;
						}
					}
				}
			}
		}

		.main {
			background-color: #f7f7f7;
			padding: 15px;

			.details {
				background-color: #fff;
				height: 50px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 18px;
				border-radius: 8px;
				overflow: hidden;
				font-size: 14px;

				.title {
					color: #111;
				}
			}

			.data {
				background-color: #fff;
				border-radius: 8px;
				padding: 18px;
				overflow: hidden;
				margin-top: 15px;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14px;

					.right {
						display: flex;
						align-items: center;

						.text {
							color: #777;
							font-size: 12px;
						}
					}

					.title {
						color: #111;
					}
				}

				.tip {
					height: 24px;
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #aaa;

					.icon {
						width: 12px;
						height: 12px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						background-color: #dadada;
						margin-left: 5px;
					}
				}

				.tab-title {
					margin-top: 20px;
					display: flex;

					.item {
						border: 1px solid #d1d1d1;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #9e9b9c;
						font-size: 12px;
						height: 30px;
						padding: 0 15px;
						border-radius: 4px;
						margin-right: 8px;

						&.actived {
							background-color: #fbf1f2;
							color: #d14861;
							border-color: #faebf1;
						}

						&:last-of-type {
							margin-right: 0;
						}
					}
				}

				.tab-content {
					display: flex;
					flex-wrap: wrap;

					&.grey {
						.item .money {
							font-size: 16px;
							color: #777;
						}
					}

					.item {
						width: calc(100% / 3);
						margin-top: 20px;

						.money {
							font-size: 18px;
							color: #000;
							display: flex;
							align-items: flex-end;

							.text {
								font-size: 12px;
								position: relative;
								bottom: 2px;
								transform: scale(.9);
							}
						}

						.label {
							font-size: 12px;
							color: #777;
							margin-top: 8px;
						}
					}
				}

				.line {
					height: 2px;
					background-color: #f2f2f2;
					margin-top: 20px;
				}
			}
		}
	}
</style>
